<template lang="pug">
  .order-center.head-page(v-if="isShow")
    HeadBar(title="用户中心", @closeBar="isShow = false")
    .order-top
      .user-profile.tac
        img.user-avatar(:src="getUserAvatar")
        p.user-name.mt10 {{ getUserName }}
      van-tabs(v-model="activeTab", @change="changeTab")
        van-tab(title="我的订单")
        van-tab(title="我的红包")

    OrderList(v-if='activeTab == 0 && getOrderData', :data="getOrderData", @handleRate="handleRate")
    Rating(:data="orderData", ref="rating")
</template>

<script>
import Rating from 'Comps/Rating/app'
import OrderList from 'Comps/OrderList'
import headBarMixin  from '@/mixins/headBar'
import { mapGetters } from 'vuex'

export default {
  name: 'orderCenter',
  mixins: [headBarMixin],
  data() {
    return {
      baseUrl: $globalconfig.URLS.API,
      homeUrl: $globalconfig.URLS.HOME,
      t5Url: $globalconfig.MODULES.NEW_T5_URL_QIANDUAN,
      isShow: false,
      activeTab: 0
    }
  },
  mounted() {
    this.showFrame()
  },
  computed: {
    ...mapGetters(['orderData', 'userInfo']),
    getOrderData() {
      if(this.orderData) {
        return this.orderData.list
      }
    },
    getUserAvatar() {
      let avatar = this.userInfo ? (this.userInfo.full_avatar || this.userInfo.avatar) : ''
      if(avatar) {
        return avatar
      }
    },
    getUserName() {
      let nickname = this.userInfo ? this.userInfo.nickname : ''
      if(nickname) {
        return decodeURIComponent(nickname)
      }
    }
  },
  methods: {
    showFrame() {
      this.$vgo.on('order:usercenter', () => {
        // console.log('bbb')
        // 重置tab状态
        // this.activeTab = 0
        // this.isShow = true
        // this.$bar.finish()

        let url = this.homeUrl.slice(0, this.homeUrl.length-1)
        if (this.t5Url) {
          url = this.t5Url
        }
        window.location.href = url + window.$globalconfig.PERSON_URL
      })
    },
    changeTab(val) {
      if(val === 1) {
        let linkData = ''
        if (this.t5Url) {
          linkData = `${this.t5Url}/m-person/#/`
        } else {
          linkData = `${this.homeUrl}m-person/#/`
        }
        this.$vgo.emit('iframe:link', linkData)
        this.isShow = false
      }
    },
    handleRate(data) {
      this.$refs.rating.showRating(data)
    }
  },
  components: {
    Rating,
    OrderList
  }
}
</script>

<style lang="stylus" scoped>
$white = #fff
$order-bg = #f6f6f6
$black-light = #475669

.order-center
  .order-top
    position: absolute
    left: 0
    top: 40px
    right: 0
    bottom: auto
    background: $order-bg
    z-index: 10
    .user-profile
      margin: 0 auto
      padding: 20px 0
      .user-name
        font-size: 14px
        color: $black-light
      .user-avatar
        width: 60px
        height: 60px
        border-radius: 50%
        border: 2px solid #f9f9f9
        overflow: hidden
        img
          width: 100%
          height: 100%
</style>
